<template>
  <div class="tool-container">
    <a-form :model="attrs.modelForm" :rules="attrs.rules" :ref="attrs.formRef">
      <a-form-item
        class="tool-form-item"
        label="名称"
        field="name"
        label-col-flex="0px"
        required
      >
        <a-input
          placeholder="请输入"
          v-model.trim="attrs.modelForm.name"
          @change="(value, ev) => handleChange(value, attrs.modelForm.id)"
        />
      </a-form-item>
      <a-form-item
        class="tool-form-item"
        label="编码"
        field="value"
        disabled
        label-col-flex="0px"
        required
      >
        <a-input placeholder="请输入" v-model.trim="attrs.modelForm.value" />
      </a-form-item>
      <a-form-item
        class="tool-form-item"
        label="说明"
        field="remark"
        label-col-flex="0px"
      >
        <a-input placeholder="请输入" v-model.trim="attrs.modelForm.remark" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup name="ToolModal">
import { useAttrs, ref, onMounted, type Ref } from "vue";
import * as Api from '@/api/configCenter/configCenter';
import type { ButtonProps, FieldRule } from "@arco-design/web-vue";
import * as ApiType from "@/api/configCenter/configCenter.d";
const attrs = useAttrs() as {
  modelForm: any;
  rules: Record<string, FieldRule<any> | FieldRule<any>[]> | undefined;
  formRef: Ref<any>;
  okButtonProps: ButtonProps;
};
const list = ref<ApiType.ToolDataItem[]>([]);
const handleChange = async (value: string, id: number) => {
  if (list.value.some(item => item.name === value && item.id !== id)) {
    attrs.okButtonProps.disabled = true;
    attrs.formRef.value.setFields({
      name: {
        status: "error",
        message: "工具名称已存在",
      },
    })
  } else {
    attrs.formRef.value.setFields({
      name: {
        status: "info",
        message: "",
      },
    })
    attrs.okButtonProps.disabled = false;
  }
}
const getList = async () => {
  const params = {
    page: 1,
    pageSize: 100000
  }
  const res = await Api.getToolData(params);
  if (res.list) {
    list.value = res.list;
  }
}
onMounted(() => (getList()))
</script>
<style lang="less" scoped>
@import url("../styles/toolModal.less");
</style>
